<template>
  <div class="financial">
  <van-tabs v-model="active" >

    <van-tab title="支付宝">
      <!--alipay-->
      <div class="alipay">
        <van-row style="padding-top: 10px" >
          <van-col span="20" >
            支付宝账号：{{alipay.account}}
          </van-col>
          <van-col span="6">
            <button style="float: right;margin-right: 10px" class="tag-read" @click="doCopy" :data-clipboard-text="alipay.account" >
              复制
            </button>
          </van-col>
        </van-row>
        <van-row style="padding-top: 10px">
          <img :src="alipay.img" with="150px" height="200px" />
          </van-row>
          <van-row style="padding-top: 10px;text-align: center;">
          <span style="">转账完成后提交订单号</span>
        </van-row>

        <van-row style="text-align: center;padding-top: 10px">
          <van-col span="20" >交易单号<input type="text " v-model="submitData.order"/>
          </van-col>
          <van-col span="4"><van-button type="default" size="mini" @click="doSubmit(1,alipay.id)">提交</van-button></van-col>
        </van-row>
      </div>
    </van-tab>

    <van-tab title="银行卡">
      <div class="bankcard">
        <van-row style="padding-top: 10px" >
          <van-col span="24" >
            请充值银行卡内：{{bank.account}} {{bank.name}} {{bank.bank_name}}
            <button style="float: right;margin-right: 10px" class="tag-reads" @click="doCopy2" :data-clipboard-text="bank.account" >
              复制卡号
            </button>
          </van-col>
        </van-row>

        <van-row style="text-align: center;padding-top: 15px">
          <van-col span="24" >充值金额：<input type="text " v-model="submitData.money" />
          </van-col>
        </van-row>

        <van-row style="text-align: center;padding-top: 15px">
          <van-col span="24" >流水号：<input type="text " v-model="submitData.order" />
          </van-col>
        </van-row>

        <van-row style="text-align: center;padding-top: 15px">
          <van-col span="24" >姓名：<input type="text " v-model="submitData.name" />
          </van-col>
        </van-row>
        <van-row style="text-align: center;padding-top: 15px">
          上传凭证
          <van-uploader :after-read="onRead" accept="image/*" multiple>
            <van-icon name="photograph" />
          </van-uploader>
        </van-row>
        <van-row style="text-align: center;padding-top: 15px">
          <van-button type="default" @click="doSubmit(2,bank.id)" >提交</van-button>
        </van-row>
      </div>
    </van-tab>

  </van-tabs>


    <div class="content" v-if="!isfull">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div  v-for="(item,index) in walletData" :key="index" style="background-color: #fff;border-bottom: 1px silver solid" >
          <van-row style="height: 50px;">
            <van-col span="16" style="padding-top: 6px;padding-left: 6px;">
              <span v-if="item.type==1" style="float: left">支付宝充值-{{item.desc}}</span>
              <span v-else-if="item.type==2" style="float: left">银行卡充值-{{item.desc}}</span>
              <span v-else-if="item.type==3" style="float: left">提现-{{item.desc}}</span>
              <span v-else-if="item.type==4" style="float: left">转帐-{{item.desc}}</span>
              <span v-else-if="item.type==5" style="float: left">提现失败退回-{{item.desc}}</span>
              <span v-else-if="item.type==6" style="float: left">佣金入账-{{item.desc}}</span>
            </van-col>
            <van-col span="8" v-if="item.money>0" style="color: green;text-align: right;padding-top: 6px;padding-right: 6px;" >+{{item.money}}</van-col>
            <van-col span="8" v-else style="color: red;padding-top: 6px">-{{item.money}}</van-col>
            <van-col span="16" style="padding-left: 6px;">{{item.created_at}}</van-col>
            <van-col span="8" style="text-align: right;padding-right: 6px;">{{item.user_money}}</van-col>
          </van-row>
        </div>
      </van-list>
    </div>



  </div>
</template>
<script>
  import { chargeAccount,addUserAssetCharge } from "../../api/user";
  import { Toast } from "vant";
  import Index from "@/views/header/index";
  import Clipboard from "clipboard";
  export default {
    components: {Index},
    data() {
      return {
        isfull:true,
        active: "支付宝",
        alipay:{},
        bank:{},
        submitData:{
          type:'', //1支付宝 2银行卡
          order:'', //交易号
          name:'',
          money:'',
        }
      };
    },
    methods:{
      doCopy(){
        var clipboard = new Clipboard(".tag-read");
        clipboard.on("success", e => {
          Toast("复制成功");
          clipboard.destroy();
        });
        clipboard.on("error", e => {
          Toast("复制失败");
          clipboard.destroy();
        });
      },
      doCopy2(){
        var clipboard = new Clipboard(".tag-reads");
        clipboard.on("success", e => {
          Toast("复制成功");
          clipboard.destroy();
        });
        clipboard.on("error", e => {
          Toast("复制失败");
          clipboard.destroy();
        });
      },

      onRead(file) {
        console.log(file)
      },

      rechargeAccount(){
        chargeAccount().then(res => {
          this.alipay = res.data.alipay;
          this.bank = res.data.bank;
        });
      },
      doSubmit(type,id){
        this.submitData.type = type
        this.submitData.recharge_account_id = id;
        addUserAssetCharge(this.submitData).then(res => {
          Toast(res.message);
          if(res.status == 200){
            if(type==1){
              this.submitData.order = '';
            }else{
              this.submitData.order = ''; //交易号
              this.submitData.name = '';
              this.submitData.money = '';
            }
          }
        });
      }
    },

    created(){
      this.rechargeAccount();
    },

  }
</script>
<style lang="scss">
  .alipay,.bankcard {
    text-align: center;
    width: 95%;
    padding-top: 10px;
    overflow-x: hidden;
    margin: 0 auto;
  }
  .financial{
    width: 100%;
    /*background-color: #f1f4f8;*/
  }
</style>
